<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .article-content{
      /*掘金style ↓*/
      word-break: break-word;
      line-height: 1.75;
      font-weight: 400;
      font-size: 15px;
      color: #333;
    }
    code{
      /*github style↓*/
      /*padding: 2px 4px;*/
      /*font-size: 90%;*/
      /*color: #c7254e;*/
      /*background-color: #f9f2f4;*/
      /*border-radius: 4px;*/

      /*掘金style ↓*/
      background-color: #fff5f5;
      color: #ff502c;
      font-size: .87em;
      padding: .065em .4em;
    }
    blockquote{
      /*github style↓*/
      /*padding: 10px 20px;
      margin: 0 0 20px;
      border-left: 5px solid #eee;*/

      /*掘金style↓*/
      color: #666;
      padding: 1px 23px;
      margin: 22px 0;
      border-left: 4px solid #cbcbcb;
      background-color: #f8f8f8;
    }

    img{
      max-width: 100%;
    }
  </style>

  <!--↓斑马纹和行号 -->
  <style>
    .hljs ul {

      list-style: decimal;

      margin: 0 0 0 40px!important;

      padding: 0

    }



    .hljs li {

      list-style: decimal-leading-zero;

      border-left: 1px solid #111!important;

      padding: 2px 5px!important;

      margin: 0!important;

      line-height: 14px;

      width: 100%;

      box-sizing: border-box

    }



    .hljs li:nth-of-type(even) {

      background-color: rgba(255,255,255,.015);

      color: inherit

    }
  </style>
  <style>

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    table {
      display: block;
      overflow: auto;
      width: 100%;
    }

    table th {
      font-weight: 600;
    }

    table td,
    table th {
      border: 1px solid #dfe2e5;
      padding: 6px 13px;
    }

    table tr {
      background-color: #fff;
      border-top: 1px solid #c6cbd1;
    }

    table tr:nth-child(2n) {
      background-color: #f6f8fa;
    }
  </style>
  <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel="stylesheet">
  <title>Document</title>
</head>
<body>
<article id="article" class="article-content">

</article>

<script src="https://cdn.bootcss.com/markdown-it/10.0.0/markdown-it.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>
<script>
  const str = `
# Marked in the browser\n\nRendered by
**marked**

\`aaa\`

## h2 title

你@-_%^

>引用:xxxxx

\`\`\`html
<a class="a123">我是a标签</a>
<p>我是p标签</p>
\`\`\`

\`\`\`js
let a = 123;
console.log(a);
function abc(){}
class bb{}
for(let i=0;i<3;++i){
    console.log(i)
}
console.log(a)
const a = require('hightlight.js')
\`\`\`

\`\`\`css
a {
  color:red;
  background: url("./1.png");
}
\`\`\`

![](./01.jpg)
![](./02.jpg)

+ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

::: warning
warning container
:::

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;
  const md = markdownit( {
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          /*
            给每一行 fenced blocks 里写的代码 包裹一层li
            并给 fenced blocks 里的整个内容包裹一层ul
          */
          const x = "<ul><li>" + hljs.highlight(lang, str, true).value.replace(/(\n)$/, '')/*←emm,因为fenced blocks语法原因,总是会多一个\n*/.replace(/\n/g, "\n</li><li>") + "\n</li></ul>";
          return `<pre><code class="hljs ${lang}">${x}</code></pre>`
        } catch (err) {
          console.error(`something wrong with hljs.highlight:`, err);
        }
      }

      return `<pre><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`;
    }
  });
  const res = md.render(str)
  console.log('res:',res)
  article.innerHTML = res;
</script>

</body>
</html>
